<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
  </head>

  <body>
    <div id="app">
      <div id="gg">{{ msg }}</div>
      <div>{{ hehe }}</div>
      <div v-text="msg"></div>
      <button @click="update">更新</button>
      <button @click="destroy">销毁</button>
      <button @click="emitMyClick">触发$on绑定的myClick事件</button>
    </div>
    <script type="text/javascript" src="../vue.js"></script>
    <script type="text/javascript">
      /*
        Vue实例的生命周期
      */
      var vm = new Vue({
        el: '#app',
        data: {
          msg: '生命周期',
        },
        methods: {
          emitMyClick() {
            // $emit Vue自带的函数，用来触发自定义事件
            // 触发一个 事件类型为 myClick 的自定义事件，传了一个字符串参数：'myClick实参'
            this.$emit('myClick', 'myClick实参');
          },
          update: function () {
            console.log('update');
            this.msg = 'hello';
          },
          destroy: function () {
            console.log('destyory.....');
            this.$destroy(); // 用来销毁实例，Vue自带的
          },
        },
        computed: {
          hehe() {
            return this.msg.toUpperCase(); // 把 msg 转换成大写 返回出去
          },
        },
        watch: {
          msg() {
            console.log(this.msg, 'watch.msg');
          },
        },
        beforeCreate: function () {
          console.log('----------------beforeCreate（拿不到data）----------------');
          console.log(this.msg);
        },
        created: function () {
          console.log(
            '----------------created（可以拿到data，但拿不到$el，此时dom还没有绑定上去，并且dom还没有经过Vue解析）----------------'
          );
          console.log(this.msg, this.$el, document.querySelector('#app').outerHTML);
        },
        beforeMount: function () {
          console.log('----------------beforeMount（可以拿到$el，但dom也还没有经过Vue解析）----------------');
          console.log(this.$el.outerHTML);
        },
        mounted: function () {
          console.log('----------------mounted（dom已经过Vue解析，并且渲染到页面中了）----------------');
          console.log(this.$el.outerHTML);
        },
        beforeUpdate: function () {
          console.log('----------------beforeUpdate（最新的数据还没有更新到dom上，dom上还是老数据）----------------');
          console.log(this.$el.outerHTML);
        },
        updated: function () {
          console.log('----------------updated（最新的数据已经更新到dom上了）----------------');
          console.log(this.$el.outerHTML);
        },
        beforeDestroy: function () {
          console.log('----------------beforeDestroy（实例仍然完全可用）----------------');
        },
        destroyed: function () {
          console.log('----------------destroyed（实例所有的数据响应式监听和事件监听会被移除）----------------');
          console.log(
            '----------------destroyed（这里所说的事件监听不是说的DOM事件（Vue没有帮我们销毁已经绑定的原生浏览器事件），而是说的通过Vue的事件API绑定的事件，如：$on、$once）----------------'
          );
        },
      });

      // 调用$destroy()后，该事件将被销毁
      // $on 是 Vue 自带的，用来监听自定义事件
      //    第一个参数 myClick 就是事件名称
      //    第二个参数 就是 事件触发时的处理函数
      vm.$on('myClick', function (msg) {
        // 这里的 this === vm
        console.log('自定义事件 myClick 触发了');
        this.msg = msg;
      });

      // created 和 mounted 的区别：
      //   created 模板还没有经过Vue的编译解析
      //   mounted 模板已经被Vue编译解析了
      //   如果要在页面一加载的时候操作DOM元素，就需要在mounted中写代码
    </script>
  </body>
</html>
